<template>
  <div style="height: 100%">
    <el-container class="container">
      <el-aside width="50">
        <Aside :menuData="menuData"></Aside>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import Aside from "@/components/Aside";
  import Header from "@/components/Header";
  import Main from "@/components/Main";
  import menuData from "../../mock/index.json"
  export default {
    beforeRouteEnter(to, from, next) {

      // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题

      document.querySelector('body').setAttribute('style','margin:0;padding:0')

      next()

    },
    name: "Index",
    data(){
      return {
        menuData
      }
    },
    methods:{
      setData(){

      }
    },
    components  : {
      Aside,
      Header,
      Main,

    }
  }
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #D3DCE6;
  color: #a88787;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;

}

body > .el-container {
  margin-bottom: 40px;
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.container{
  height: 100%;
  width: 100%;
  position: absolute;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);

}
.layout-container-demo .el-aside {

}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

</style>
<!--<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!--<el-radio-button :label="false">展开</el-radio-button>-->
<!--<el-radio-button :label="true">收起</el-radio-button>-->
<!--</el-radio-group>-->
<!--<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">-->
<!--<el-submenu index="1">-->
<!--  <template slot="title">-->
<!--    <i class="el-icon-location"></i>-->
<!--    <span slot="title">导航一</span>-->
<!--  </template>-->
<!--  <el-menu-item-group>-->
<!--    <span slot="title">分组一</span>-->
<!--    <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--    <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--  </el-menu-item-group>-->
<!--  <el-menu-item-group title="分组2">-->
<!--    <el-menu-item index="1-3">选项3</el-menu-item>-->
<!--  </el-menu-item-group>-->
<!--  <el-submenu index="1-4">-->
<!--    <span slot="title">选项4</span>-->
<!--    <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!--  </el-submenu>-->
<!--</el-submenu>-->
<!--<el-menu-item index="2">-->
<!--  <i class="el-icon-menu"></i>-->
<!--  <span slot="title">导航二</span>-->
<!--</el-menu-item>-->
<!--<el-menu-item index="3" disabled>-->
<!--  <i class="el-icon-document"></i>-->
<!--  <span slot="title">导航三</span>-->
<!--</el-menu-item>-->
<!--<el-menu-item index="4">-->
<!--  <i class="el-icon-setting"></i>-->
<!--  <span slot="title">导航四</span>-->
<!--</el-menu-item>-->
<!--</el-menu>-->

<!--<style>-->
<!--.el-menu-vertical-demo:not(.el-menu&#45;&#45;collapse) {-->
<!--  width: 200px;-->
<!--  min-height: 400px;-->
<!--}-->
<!--</style>-->

<!--<script>-->
<!--export default {-->
<!--  name:"Index",-->
<!--  data() {-->
<!--    return {-->
<!--      isCollapse: true-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleOpen(key, keyPath) {-->
<!--      console.log(key, keyPath);-->
<!--    },-->
<!--    handleClose(key, keyPath) {-->
<!--      console.log(key, keyPath);-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->